<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 自己试试看前面插入 before 的效果 */
      .newEntry::after {
        /**
          * content 的值
          *  1.可以为空 null 字符/字符串
          *  2.甚至可以动态加载值attr / 远程的资源地址url（上面的必须知道，这里的话暂时知道有这个语法也行） 
          */
        content: 'New🍓!';
        /* 这里的属性基本和正常写 css 一样，都能用 */
        color: red;
      }

      span.tip {
        position: relative;
        color: red;
        cursor: help;
      }

      span.tip:hover::after {
        content: '1.坚持运动。慢跑能促进内啡肽分泌,散步半小时到1小时,能促进多巴胺分泌与吸收。2.睡个好觉。睡眠时，多巴胺消耗量会变得很少，使得第二天充满活力。';
        position: absolute;
        left: 0;
        top: 24px;
        min-width: 200px;
        border: 1px #aaaaaa solid;
        border-radius: 10px;
        background-color: #ffffcc;
        padding: 12px;
        color: #000000;
        font-size: 14px;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <h2>1.基本的用法</h2>
    <ol>
      <li>Political thriller</li>
      <li class="newEntry">Halloween Stories</li>
      <li>My Biography</li>
      <li class="newEntry">Vampire Romance</li>
    </ol>

    <h2>2.常用的用法, 配合伪类选择器hover 一起使用</h2>
    <p>
      <span class="tip">#1分钟感受身边的幸福（点我一下，我有一些提示）</span>
    </p>

    <!-- 
      作业：看新闻的时候随便看到一个效果，感觉可以用这个来实现的，可以写一下看看 
        1.可以用这个伪类写写正方形，三角形，加强印象
        2.比如可以在上面这个hover的例子上继续加强 
          2.1 希望是hover上去某一个字符，就出现这个面板，然后还有一个小箭头是指向这个字符的
        
       
       效果参考：https://www.javascriptpeixun.cn/ 珠峰官网下面的那个图标就会出现二维码这种类似的效果
     -->
  </body>
</html>
